﻿//编辑视图
NotesApp.views.NoteEditorView = Ext.extend(Ext.form.FormPanel, {//继承Ext的FormPanel，并添加initComponent构造函数
    initComponent: function () {
        this.backButton = new Ext.Button({//后退按钮
            text: 'Home',
            ui: 'back',//icon的样式
            handler: this.backButtonTap,
            scope: this
        });
        this.saveButton = new Ext.Button({//保存按钮
            text: 'Save',
            ui: 'action',
            handler: this.saveButtonTap,
            scope: this
        });
        this.trashButton = new Ext.Button({//删除按钮
            iconCls: 'trash',
            iconMask: true,
            handler: this.trashButtonTap,
            scope: this
        });
        this.topToolbar = new Ext.Toolbar({//new一个工具条，把后退和保存按钮放置上边
            title: 'Edit Note',
            items: [
                this.backButton,
                { xtype: 'spacer' },
                this.saveButton
            ]
        });
        this.bottomToolbar = new Ext.Toolbar({//new一个底部工具条，把删除按钮放置上边
            dock: 'bottom',//底部
            items: [
                { xtype: 'spacer' },
                this.trashButton
            ]
        });
        this.dockedItems = [this.topToolbar, this.bottomToolbar];//此编辑FormPanel的头部和底部加入两个工具条
        NotesApp.views.NoteEditorView.superclass.initComponent.call(this);
    },
    backButtonTap: function () {//点击后退按钮, 调用取消编辑(canceledit)action
        Ext.dispatch({
            controller: NotesApp.controllers.notesController,
            action: 'canceledit'
        });
    },
    saveButtonTap: function () {//点击保存按钮, 调用保存action
        Ext.dispatch({
            controller: NotesApp.controllers.notesController,
            action: 'savenote'
        });
    },
    trashButtonTap: function () {//点击删除按钮, 调用删除action
        Ext.dispatch({
            controller: NotesApp.controllers.notesController,
            action: 'deletenote'
        });
    },
    items: [{//此编辑FormPanel添加用户输入的field
        xtype: 'textfield',//field类型
        name: 'title',//跟model的name对应
        label: 'Title',//用户看到的field名称
        required: true//必填项
    }, {
        xtype: 'textareafield',
        name: 'narrative',
        label: 'Narrative'
    }]
});